es6的class继承为什么要调用super-天天热推荐

来源:php中文网 | 2022-10-20 18:05:01 |

前端(vue)入门到精通课程:进入学习Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用


(相关资料图)

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

在学习ES6 class继承时往往提到一个关键点

一个子类 SubClass 继承父类 SuperClass 的构造器constructor时有两个要求:

1)必须在构造器调用 super( )。

2) this必须写在super( )之后。

第一点是为了解决父类子类的歧义,确定了

“子类没有自己的 this”这一概念

子类和父类是个相对的概念,因为一个类可以既是子类也是父类,所以ES6里用的是绝对的概念:基类和派生类。而且这个概念是针对所有构造函数说的,JS 里的构造函数要么是基的,要么就是派生的。

ES6中,我们随手写的构造函数(function)都是基类,基类可以直接用this来指向调用它所在方法的对象。

咱自己给this总结了一句话:谁调用了this,this就指向谁。

function Super(name) {            this.name = name;            SuperFactory.prototype.sayHi = function () {                console.log("Hi");            }        }        let super = new Super("peter");//通过new创建了新的对象,Super()中的this即指向这个对象

ES6中的派生类,就是extend的class。派生出的构造函数不会创造新的this对象(或者说this指向的对象(这里可以回顾一下new关键字做的事情),就是所说的"子类没有自己的this"。只有通过super()把基类创建好的this对象接下来,派生类才能像基类一样使用this来生成对象的属性。

class SuperClass {                //基类 not父类    constructor(name) {        this.name = name;        }     sayHi() {        console.log("Hi");        }    }; class SubClass extends SuperClass {//派生类 not子类    constructor(name,age) {                surpe(name);                this.age = age;            }    sayNo() {        console.log("NO");        }    };        let subinst = new subClass("tom",18);subinst.sayHi();//Hisubinst.sayNo();//NO

那this为什么必须写在super( )之后

是为了避免一个代码陷阱。

class Person {  constructor(name) {    this.name = name;  }} class PolitePerson extends Person {  constructor(name) {    this.greetColleagues(); // 这里不允许我们使用this,下面解释    super(name);  }  greetColleagues() {    alert("Good morning folks!");  }}

上面的例子假设调用 super( )之前允许使用 this, 一段时间后为了满足一些需求,我们在 greetColleagues( ) 中添加:

greetColleagues() {    alert("Good morning folks!");    alert("My name is " + this.name + ", nice to meet you!");  }

但是我们忘了,this.greetColleagues( ) 在 super( )调用之前,this.name根本都没有定义,代码会抛错,像这样的代码可能很难想到什么时候发生。

因此,为了避免这个陷阱,JavaScript 强制要求在 constructor 中使用 this 之前,必须先调用 super。

以上就是es6的class继承为什么要调用super的详细内容,更多请关注php中文网其它相关文章!

关键词: javascript